<template>
  <div class="box-card">
    {{ dataList }}
    <div class="box-title d-flex justify-center align-center text-h4 mb-10">
      <img class="box-icon mr-2" src="@/static/img/icon/hot.png" style="width: 30px;"/>
      <span>{{ title }}</span>
    </div>

    <div class="box-container">
      <v-row class="box-list">
        <v-col v-for="(item, index) in dataList" :key="index" class="pa-2" cols="6" lg="2" md="3"
        >
          <router-link :to="`/casebox/${item.id}`">
            <div class="box-item">
              <div class="img">
                <img :src="`${BASE_URL}/${item.img}`" style="height: 164px"/>
              </div>

              <div class="my-3 pb-4">
                <p>{{ item.name }}</p>
                <div class="price mt-1">
                  <span>{{ item.price }}</span> 硬币
                </div>
              </div>
            </div>
          </router-link>

        </v-col>
      </v-row>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import {useRouter} from "vue-router"
import newIcon from '@/static/img/icon/new.png'
import popularIcon from '@/static/img/icon/popular.png'

export default defineComponent({
  name: 'BoxCard',
  props: {
    list: {
      type: Array,
      default: [],
      require: true
    },
    title: {
      type: String,
      default: '',
      require: true,
    }
  },
  setup(props) {
    const router = useRouter()
    const state = reactive({
      dataList: props.list.list
    })


    return {
      ...toRefs(state),
      newIcon,
      popularIcon,
    }
  }
})
</script>

<style lang="scss" scoped>
.box-card {

  .box-container {

    .box-list {

      .box-item {
        cursor: pointer;
        background-color: #36363c;
        height: 100%;

        &:hover {
          background-color: #53535a;

          .price {
            background-color: #7668cb;
          }
        }

        p {
          text-align: center;
          width: 100%;
          color: #afafaf;
          margin-top: 0;
        }

        .tag {
          position: absolute;
          top: 0;
          right: 0;
        }

        .price {
          cursor: pointer;
          display: inline-block;
          padding: 0.4rem 0.7rem;
          transform: translateX(-50%);
          position: relative;
          left: 50%;
          border-radius: 4px;
          font-size: 1.4rem;
          font-weight: 700;
          color: #fff;
          align-items: center;
        }

        .img {
          position: relative;
          width: 100%;
          -webkit-transition: 0.6s;
          transition: 0.6s;

          img {
            width: 100%;
            position: relative;
            z-index: 1;
          }
        }
      }
    }
  }
}
</style>
